<template>
  <div class="bigview">
    <el-container>
      <el-main>
        <div style="width: 100%">
          <h3>工单标题</h3>
          <el-input
            name="issuename"
            class="issuename"
            v-model="issueName"
            disabled
          />

          <el-scrollbar max-height="400px">
            <h3>内容</h3>
            <el-card shadow="never" style="width: 90%">
              {{ issueContent }}
            </el-card>
          </el-scrollbar>

          <div class="twobutton"></div>
        </div>
      </el-main>
      <el-aside>
        <div class="big2">
          <div class="chosestate">
            <span
              style="font-family: SimHei; font-size: 60 px; margin-right: 10px"
              >状态</span
            >
            <el-select
              v-model="issueState"
              size="large"
              placeholder="状态"
              disabled
              style="width: 120px; margin-left: 15px"
              @change="selectstate"
            >
              <el-option
                v-for="item in states"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="chosepriority">
            <span
              style="font-family: SimHei; font-size: 60 px; margin-right: 10px"
              >优先级</span
            >
            <el-select
              v-model="issuePriority"
              class="selectpriority"
              placeholder="优先级"
              size="large"
              disabled
              style="width: 120px"
              @change="selectpriority"
            >
              <el-option
                v-for="item in prioritys"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </div>
          <div class="chosechief">
            <span
              style="font-family: SimHei; font-size: 60 px; margin-right: 10px"
              >负责人</span
            >
            <el-select
              v-model="issueChief"
              multiple
              disabled
              size="large"
              placeholder="负责人"
              style="width: 120px"
              @change="selectchief"
            >
            </el-select>
          </div>
        </div>
        <el-button type="success" @click="cancel" class="button2"
          >返回</el-button
        >
      </el-aside>
    </el-container>
  </div>
</template>

<script>
import request from "@/utils/request";
export default {
  name: "ViewIssue",
  data() {
    return {
      issueId: 1,
      issueName: "",
      issueContent: "",
      issueState: 1,
      issuePriority: 1,
      issueCreateTime: "",
      issueUpdateTime: "",
      issueChief: [],
      members: [],
      states: [
        {
          value: 1,
          label: "无状态",
        },
        {
          value: 2,
          label: "代办的",
        },
        {
          value: 3,
          label: "进行中",
        },
        {
          value: 4,
          label: "已完成",
        },
        {
          value: 5,
          label: "已拒绝",
        },
      ],
      prioritys: [
        {
          value: 1,
          label: "不指定",
        },
        {
          value: 2,
          label: "不重要",
        },
        {
          value: 3,
          label: "次要",
        },
        {
          value: 4,
          label: "主要",
        },
        {
          value: 5,
          label: "严重",
        },
      ],
    };
  },
  created() {
    this.getIssue();
    this.viewChief();
    //填充选项
    request
      .get(
        `/house/showhousemember?ownnername=${this.$route.params.username}&housename=${this.$route.params.housename}&type=0`
      )
      .then((res) => {
        console.log(res);
        this.members = res.data;
      });
  },
  methods: {
    viewChief() {
      //查看负责人
      request
        .get(`/issue/viewIssuemember?id=${this.$route.params.issueId}`)
        .then((res) => {
          if (res.code == 200) {
            console.log(res);
            this.issueChief = res.data;
          } else {
            console.log("获得查看负责人失败");
          }
        });
    },
    getIssue() {
      request
        .get(`/issue/viewIssue?id=${this.$route.params.issueId}`)
        .then((res) => {
          if (res.code == 200) {
            this.issueId = res.data.id;
            this.issueName = res.data.name;
            this.issueContent = res.data.content;
            this.issueState = res.data.state;
            this.issuePriority = res.data.priority;
            this.issueCreateTime = res.data.createTime;
            this.issueUpdateTime = res.data.updateTime;
          } else {
            console.log("获得工单信息失败");
          }
        })
        .catch((error) => {
          console.log("获得工单信息失败");
        });
    },
    cancel() {
      this.$router.back();
    },
  },
};
</script>

<style scoped>
.bigview {
  margin-left: 300px;
  margin-right: 200px;
}
.issuename {
  height: 40px;
  font-size: 20px;
  margin-top: 10px;
}
.twobutton {
  margin-top: 20px;
  margin-left: 50px;
  margin-right: 50px;
  padding-right: 100px;
  padding-left: 100px;
  display: flex;
  justify-content: space-between;
}
.chosechief {
  margin-bottom: 30px;
}
.chosepriority {
  margin-bottom: 30px;
}
.chosestate {
  margin-top: 40px;
  margin-bottom: 30px;
}
.button1 {
  width: 200px;
  position: absolute;
  top: 80%;
  left: 30%;
}
.button2 {
  width: 180px;
}
.button3 {
  width: 150px;
}
</style>
